<template>
	<view class="coupon_main">
		<!--bgcolor="#FD9031" -->
		<title :center="false" title="优惠券" iconSize="38" bgcolor="linear-gradient(45deg, #f43f3b, #ec008c)"   color="#FFF"
		 @to-click="toBack(1)" icon="/static/img/other/to-back.png"></title>
		 <view class="coupon_top" :style="{'margin-top': height * 1.5 + 100 + 'rpx'}">
			 <u-search placeholder="输入优惠券兑换码" v-model="value" class="youhui" :clearabled="true" :show-action="false" search-icon="scan"></u-search>
			 <view class="index-movie-red">
			 	兑换
			 </view>
		 </view>
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	export default {
		data() {
			return {
				height:0,
				value:''
			}
		},
		methods: {
			toBack(index) { //返回
				this.$common.toBack(index)
			},
		},
		onShow(){
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight()
			})
		},
		components: {
			title
		},
	}
</script>

<style lang="scss" scoped>
.coupon_main{
	width: 100vw;
	height: 100vh;
	background-color: #F9F9F9;
	.coupon_top{
		background-color: #fff;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		position: relative;
	}
	.youhui{
		width: 85%;
		height: 64rpx;
		background-color: #F5F5F5;
		margin-right: 30rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
	}
	.index-movie-red {
		background-color: #f1255d;
		color: #fff;
		font-size: 28rpx;
		width: 130rpx;
		height: 62rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icon-tubiaolunkuo-{
		position: absolute;
		font-size: 26rpx;
		color: #808080;
		left: 50rpx;
		top:48rpx;
		z-index: 999;
	}
}
</style>
